<!DOCTYPE html>
<html>
<head>
<script>
var NumberOfGraphAdd = 0;
function addElement() {
 var para = document.createElement("p");
 NumberOfGraphAdd ++;
 para.setAttribute("id", "p" + NumberOfGraphAdd);
 document.getElementById("par1").innerHTML = "new paragraph with id " + NumberOfGraphAdd + ".";
 var node = document.createTextNode("add a new paragraph.");
 para.appendChild(node);
 var element = document.getElementById("main");
 element.appendChild(para);
}
function removeElement() {
 if(NumberOfGraphAdd > 0) {
  var child = document.getElementById("p" + NumberOfGraphAdd);
  child.parentNode.removeChild(child);
  document.getElementById("par1").innerHTML = "Paragraph " + NumberOfGraphAdd + " been removed.";
  NumberOfGraphAdd --;
 } else {
  document.getElementById("par1").innerHTML = "No Paragraph can be removed.";
 }
}
</script>
</head>
<body id="main">
<p id="par1">this is a paragraph.</p>
<p>this is another paragraph.</p>
<button onclick="addElement()">Add new Element</button>
<button onclick="removeElement()">Remove a Element</button>
</body>
</html>